/**form标签属性 */
//  action：指定表单数据提交的目标URL。
//  method：指定提交表单时使用的HTTP方法，通常为GET或POST。
//  enctype：指定在表单数据提交时使用的编码类型，常见的取值有application/x-www-form-urlencoded和multipart/form-data。
//  target：指定表单提交后响应的目标窗口或框架的名称。
//  name：指定表单的名称，用于在JavaScript中引用表单。
//  autocomplete：指定表单是否启用自动完成功能。
//  novalidate：指定表单在提交时不进行验证。
//  accept-charset：指定在表单提交时使用的字符集。

/**表单字段的公共属性 */
// id：指定元素的唯一标识符。
// name：指定元素的名称，用于在提交表单时标识字段。
// value：指定元素的值，例如文本输入框中的默认文本或选项的值。
// disabled：指定元素是否被禁用，禁用的元素将无法接收用户输入或参与表单提交。
// readonly：指定元素是否为只读，只读元素可以显示值但无法修改。
// required：指定元素是否为必填项，如果设置为true，则用户必须填写该字段才能提交表单。
// placeholder：指定在输入框中显示的提示文本。
// autofocus：指定元素是否自动获取焦点。
// autocomplete：指定元素是否启用自动完成功能。

/**表单字段的公共方法： */
// 获取或设置表单元素的值

var value = element.value; // 获取表单元素的值
element.value = "new value"; // 设置表单元素的值
// 获取或设置表单元素的禁用状态

var disabled = element.disabled; // 获取表单元素的禁用状态
element.disabled = true; // 禁用表单元素
element.disabled = false; // 启用表单元素
// 获取或设置表单元素的只读状态

var readOnly = element.readOnly; // 获取表单元素的只读状态
element.readOnly = true; // 设置表单元素为只读
element.readOnly = false; // 取消表单元素的只读状态
// 获取或设置表单元素的选中状态（仅适用于单选框和复选框）

var checked = element.checked; // 获取表单元素的选中状态
element.checked = true; // 设置表单元素为选中状态
element.checked = false; // 设置表单元素为未选中状态
// 获取或设置表单元素的焦点状态

element.focus(); // 设置表单元素获取焦点
element.blur(); // 设置表单元素失去焦点
// 获取或设置表单元素的默认值

var defaultValue = element.defaultValue; // 获取表单元素的默认值
element.defaultValue = "new default value"; // 设置表单元素的默认值

/**表单字段的公共事件： */

// focus：当表单字段获得焦点时触发。

element.addEventListener("focus", function (event) {
    // 处理获得焦点事件
});
// blur：当表单字段失去焦点时触发。

element.addEventListener("blur", function (event) {
    // 处理失去焦点事件
});
// input：当表单字段的值发生改变时触发。

element.addEventListener("input", function (event) {
    // 处理值改变事件
});
// change：当表单字段的值发生改变并且失去焦点时触发（适用于文本框、下拉框、单选框、复选框等）。

element.addEventListener("change", function (event) {
    // 处理值改变事件
});
// submit：当表单提交时触发（适用于form元素）。

element.addEventListener("submit", function (event) {
    // 处理表单提交事件
    event.preventDefault(); // 阻止表单的默认提交行为
});
// reset：当表单重置时触发（适用于form元素）。

element.addEventListener("reset", function (event) {
    // 处理表单重置事件
});

/**剪切板事件包括（都有before前缀，代表操作之前，比如beforecut表示剪切操作发生前触发） */
// cut：当用户执行剪切操作时触发。
// copy：当用户执行复制操作时触发。
// paste：当用户执行粘贴操作时触发。

/**pattren */
// pattern属性用于指定输入字段的正则表达式模式，以便在客户端进行输入验证。
// 当用户尝试提交表单时，浏览器会检查输入字段的值是否符合指定的正则表达式模式，并阻止表单的提交
<input type="text" pattern="[0-9]*" title="只能输入数字"></input>

/**checkValidity */
// checkValidity()是一个用于表单验证的方法，它可以在JavaScript中调用，用于检查表单字段的有效性。
// 当调用checkValidity()方法时，它会遍历表单中的所有字段，并执行相应的验证规则。如果所有字段都通过验证，则返回true；如果有任何一个字段未通过验证，则返回false。
var form = document.getElementById("myForm");
form.addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    if (form.checkValidity()) {
        // 所有字段通过验证，可以进行提交操作
        form.submit();
    } else {
        // 有字段未通过验证，进行相应的处理
        // 可以使用form.reportValidity()方法来显示验证错误信息
        form.reportValidity();
    }
});


/**选择框编程 */
//可以使用select元素的value属性来获取选择框当前选中的值
var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value;
//设置选择框的选中值
var selectElement = document.getElementById("mySelect");
selectElement.value = "option2";
//动态添加选项
// add()方法接受两个参数，第一个参数是一个新的option元素，第二个参数是一个可选的位置参数，用于指定新选项的插入位置。
var selectElement = document.getElementById("mySelect");
var newOption = document.createElement("option");
newOption.text = "Option 3";
newOption.value = "option3";
selectElement.add(newOption, 2); // 在第三个位置插入新选项
//动态删除选项
var selectElement = document.getElementById("mySelect");
selectElement.remove(2); // 删除第三个选项

/**getSelection  */
// 获取用户选中的文本
var selectedText = window.getSelection().toString();
// 输出选中的文本
console.log(selectedText);
// getSelection 方法返回的 Selection 对象具有一些常用的属性，可以用于获取有关用户选择的文本的信息。以下是一些常用的属性：
// anchorNode: 返回表示用户选择的起始节点的 Node 对象。
// anchorOffset: 返回一个整数，表示用户选择的起始偏移量（在起始节点内的偏移量）。
// focusNode: 返回表示用户选择的结束节点的 Node 对象。
// focusOffset: 返回一个整数，表示用户选择的结束偏移量（在结束节点内的偏移量）。
// isCollapsed: 返回一个布尔值，表示用户选择的文本是否是折叠状态（即起始和结束在同一位置）。
// rangeCount: 返回一个整数，表示选择中包含的 Range 对象的数量。

